<template>
	<div class="tips-bar">
		<el-dialog
			v-drag-dialog
			:title="title"
			:visible.sync="dialogVisible"
			:width="width"
			:fullscreen="fullscreen"
			:top="top"
			:lock-scroll="lockScroll"
			:modal="modal"
			:close-on-click-modal="closeOnClickModal"
			:append-to-body="appendToBody"
			:modal-append-to-body="modalAppendToBody"
			class="min-width"
			@close="handleCloseDialog"
			@open="handleOpenDialog"
		>
			<!--内容栏-->
			<div v-loading="showContentLoading" class="flex-start-center-center dialog-box-content">
				<slot name="content" />
				<slot />
			</div>
			<!--底部按钮栏-->
			<div slot="footer" class="dialog-footer flex-end width-100-percent" :style="{justifyContent: fullscreen ? 'center' : ''}">
				<slot name="footer" />
				<div class="margin-left-10 margin-right-10">
					<jk-button v-show="showCloseBtn" size="small" type="danger" @keyup.enter="onEnter" @click="handleCloseBtn">关 闭</jk-button>
				</div>
				<jk-button v-if="showCancelBtn" size="small" class="item-gap" @click="handleCancelBtn">取 消</jk-button>
				<jk-button
					v-if="showConfirmBtn"
					size="small"
					:disabled="disableConfirmBtn"
					type="primary"
					class="item-gap"
					:loading="confirmBtnLoading"
					@click="handleConfirmBtn"
				>确 定</jk-button>
				<jk-button
					v-if="showSaveBtn"
					size="small"
					type="primary"
					class="item-gap"
					:loading="saveBtnLoading"
					@click="handleSaveBtn"
				>保 存</jk-button>
				<jk-button
					v-if="showToLoginBtn"
					size="small"
					type="primary"
					@click="handleToLoginBtn"
				>去登录</jk-button>
				<jk-button v-if="showCustomBtn" size="small" class="item-gap" :disabled="customDisabled" :loading="customBtnLoading" :icon="customIcon" :type="customType" @click="handleCustomBtn">{{ customName }}</jk-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
    import permissionMixin from '../../../mixins/permission-mixin';
    import { throttle } from '../../../utils/jk/jk-tool';

    export default {
        name: 'JkDialog',
        mixins: [permissionMixin],
        model: {
            prop: 'dialogState',
            event: 'on-dialog-change'
        },
        props: {
            // 页面权限的前缀
            permissionPrefix: {
                type: String,
                default: ''
            },
            // 自定义按钮
            customDisabled: {
                type: Boolean,
                default: false
            },
            customBtnLoading: {
                type: Boolean,
                default: false
            },
            showCustomBtn: {
                type: Boolean,
                default: false
            },
            customType: {
                type: String,
                default: ''
            },
            customIcon: {
                type: String,
                default: ''
            },
            customName: {
                type: String,
                default: ''
            },
            status: {
                type: Number,
                default: null
            },
            showToLoginBtn: {
                type: Boolean,
                default: false
            },
            disableConfirmBtn: {
                type: Boolean,
                default: false
            },
            lockScroll: {
                type: Boolean,
                default: true
            },
            appendToBody: {
                type: Boolean,
                default: false
            },
            modalAppendToBody: {
                type: Boolean,
                default: false
            },
            closeOnClickModal: {
                type: Boolean,
                default: false
            },
            // 对话框的title
            title: {
                type: String,
                default: '提示'
            },
            width: {
                type: String,
                default: '500px'
            },
            // 是否需要遮罩层
            modal: {
                type: Boolean,
                default: true
            },
            fullscreen: {
                type: Boolean,
                default: false
            },
            top: {
                type: String,
                default: '10vh'
            },
            // 对话框的状态
            dialogState: {
                type: Boolean,
                default: false
            },
            // 对话框的icon图标
            tipsIcon: {
                type: String,
                default: 'el-icon-question'
            },
            // 内容的loading
            showContentLoading: {
                type: Boolean,
                default: false
            },
            // 控制按钮的loading
            confirmBtnLoading: {
                type: Boolean,
                default: false
            },
            saveBtnLoading: {
                type: Boolean,
                default: false
            },
            // 控制按钮的显示
            showCancelBtn: {
                type: Boolean,
                default: true
            },
            showConfirmBtn: {
                type: Boolean,
                default: true
            },
            showCloseBtn: {
                type: Boolean,
                default: false
            },
            showSaveBtn: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                dialogVisible: false
            };
        },
        watch: {
            dialogState(newVal) {
                this.dialogVisible = newVal;
            }
        },
        directives: {
            focus(el) {
                el.focus();
            }
        },
        methods: {
            onEnter() {
                this.showDialog = false;
            },
            handleClick() {

            },
            handleCustomBtn() {
                this.$emit('on-custom');
            },
            handleCancelBtn() {
                this.$emit('on-cancel');
            },
            handleConfirmBtn: throttle((e, _this) => {
                _this.$emit('on-confirm');
            }),
            handleToLoginBtn() {
                this.$emit('on-login');
            },
            handleCloseBtn() {
                this.$emit('on-close');
            },
            // dialog关闭时
            handleCloseDialog() {
                this.$emit('on-close-dialog');
                this.$emit('on-visible-change', false);
            },
            handleSaveBtn: throttle((e, _this) => {
                _this.$emit('on-save');
            }),
            handleOpenDialog() {
                // 监听dialog状态
                this.$emit('on-visible-change', true);
            }
        }
    };
</script>
<style scoped>
    .min-width >>> .el-dialog {
        min-width: 400px !important
    }

    .min-width >>> .el-dialog__body {
        max-height: 100vh !important;
        overflow: auto !important;
        padding: 16px 20px !important;
    }
    .el-button--orange {
        color: #fff;
        background-color: #FF6600;
        border-color: #FF6600;
    }
</style>
